
<style>
    .anchorBL{
        display:none;
    }
    .search-tools{
        display: flex;
        align-items: center;
    }
    .search-tools button{
        margin: 0 20px;
    }
    .search-tools input{
        width: 180px;
    }
</style>
<div class="layui-fluid layui-anim febs-anim" id="febs-map" lay-title="壳牌地图">
    <div class="layui-row febs-container">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body febs-table-full">
                    <form class="layui-form layui-table-form" lay-filter="dictDetail-table-form">
                        <div class="layui-row">
                            <div class="layui-col-md10">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <div class="search-tools">
                                            <span>地址：</span>
                                            <input id="searchValue" type="text" autocomplete="off" class="layui-input">
                                            <button id="btnSearch" type="button" class="layui-btn layui-btn-xs">搜索</button>
                                            <span>当前点坐标：</span>
                                            <input id="coordinatesValue" type="text" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <!--map-->
                    <div id="BaiduMap" style="height: 500px"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script data-th-inline="none" type="text/javascript">
    layui.use(['dropdown', 'jquery', 'laydate', 'form', 'table', 'febs'], function () {
        var $ = layui.jquery,
            laydate = layui.laydate,
            febs = layui.febs,
            form = layui.form,
            table = layui.table,
            dropdown = layui.dropdown,
            $view = $('#febs-map');

    });
    //定义数组
    var shellData = [
        {
            icon: "/febs/images/avatar/icon_qiaopai.png",
            content: "壳牌油站",
            longitude: 120.193088,
            latitude: 30.201907
        },
        {
            icon: "/febs/images/avatar/icon_shihua.png",
            content: "石化",
            longitude: 120.107833,
            latitude: 30.246914
        },
        {
            icon: "/febs/images/avatar/icon_shiyou.png",
            content: "石油",
            longitude: 120.229308,
            latitude: 30.228371
        },
        {
            icon: "/febs/images/avatar/icon_zhongshihua.png",
            content: "中石化",
            longitude: 120.221834,
            latitude: 30.2143911
        }
    ];
    // 定义需要动态引入的js文件列表
    var scriptArr = ['http://api.map.baidu.com/getscript?v=2.0&ak=seKuYX6fgCSPPD1Kw20jGRmAHZkDMa4V', 'http://api.map.baidu.com/library/MarkerTool/1.2/src/MarkerTool_min.js','http://api.map.baidu.com/library/CityList/1.4/src/CityList_min.js'];
    // 从索引i=0的文件开始引入，i++直到最后一个引入完成后回调callback
    loadScript(scriptArr,0, function () {

        var map = new BMap.Map("BaiduMap", {});// 创建Map实例
        map.centerAndZoom('杭州',12);// 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom();//启用滚轮放大缩小

        // map.addEventListener("click", function (e) {
        //     layer.msg('获取位置成功');
        // });

        var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map},
            onMarkersSet: function(res) {
                res.forEach(function(e, i) {
                    var marker = e.marker;
                    marker.addEventListener("click", function() {
                        var _val = e.point.lng + "," + e.point.lat;
                        layui.jquery("#coordinatesValue").val(_val);
                        layui.jquery(window.parent.document).find("#longitude").val(e.point.lng);
                        layui.jquery(window.parent.document).find("#latitude").val(e.point.lat);
                    });

                })

            }
        });
        //搜索
        layui.jquery("#btnSearch").on("click", function () {
            var searchValue = layui.jquery("#searchValue").val();
            local.search(searchValue);
        });
        // 编写自定义函数,创建标注
        function addMarker(point, myIcon, sContent){
            var marker = new BMap.Marker(point, {icon:myIcon});
            var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
            map.addOverlay(marker);

            marker.addEventListener("click", function(){
                this.openInfoWindow(infoWindow);
                //图片加载完毕重绘infowindow
                document.getElementById('imgDemo').onload = function (){
                    infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
                }
            });
        }

        for (var i = 0; i < shellData.length; i++) {
            var myIcon = new BMap.Icon(shellData[i].icon, new BMap.Size(24,24));
            var point = new BMap.Point(shellData[i].longitude, shellData[i].latitude);
            var sContent =
                "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+shellData[i].content+"</h4>" +
                "<img style='float:right;margin:4px' id='imgDemo' src=' "+shellData[i].icon+ "' height='104' title=' "+shellData[i].icon+ "'/>" +
                "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+shellData[i].content+"</p>" +
                "</div>";

                addMarker(point, myIcon, sContent)
        }
    });

    //加载地图
    function loadScript(arr, i, callback){
        var script = document.createElement('script');
        script.type = 'text/javascript';
        /*if else 这几句话必须要写到这位置处，不能放最后，因为if中js加载中script.readyState存在好几种状态，
         只有状态改变‘readystatechange’事件才会触发，但现在浏览器加载速度很快，当解析到该事件时JS有可能已经加载完，
         所以事件根本不会触发，所以要写到前面*/
        if(script.readystate){//兼容IE
            script.onreadystatechange = function() {//状态改变事件才触发
                if(script.readyState == 'loaded' || script.readyState == 'complete'){
                    if(i==arr.length-1){
                        console.log("LoadScript callback: "+arr[i]);
                        callback();
                    }else{
                        loadScript(arr,i+1,callback);
                    }
                    script.onreadystatechange = null;
                }
            }
        }else{
            script.onload = function(e){
                if(i==arr.length-1){
                    console.log("LoadScript callback: "+arr[i]);
                    callback();
                }else{
                    loadScript(arr,i+1,callback);
                }
            }
        }
        script.src = arr[i];
        document.body.appendChild(script);
        console.log("LoadScript: "+arr[i]);
    }

</script>